
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Link } from "react-router-dom";
import { 
  BookOpen, 
  Target, 
  Users, 
  Brain,
  ArrowRight,
  Play,
  Star,
  CheckCircle,
  BookMarked,
  Calendar,
  Trophy
} from "lucide-react";
import { useState } from "react";
import { AssessmentSelection } from "./assessment/AssessmentSelection";
import { LearningResourceLibrary } from "./resources/LearningResourceLibrary";
import { ProgressTracker } from "./progress/ProgressTracker";
import { GoalSettingModal } from "./goals/GoalSettingModal";
import { StudyScheduleModal } from "./schedule/StudyScheduleModal";

export const StudentHome = () => {
  const [showAssessment, setShowAssessment] = useState(false);
  const [showResourceLibrary, setShowResourceLibrary] = useState(false);
  const [showProgressTracker, setShowProgressTracker] = useState(false);
  const [showGoalSetting, setShowGoalSetting] = useState(false);
  const [showScheduling, setShowScheduling] = useState(false);

  const handleTakeAssessment = () => {
    setShowAssessment(true);
  };

  const handleOpenResourceLibrary = () => {
    setShowResourceLibrary(true);
  };

  const handleOpenProgressTracker = () => {
    setShowProgressTracker(true);
  };

  const handleSetGoals = () => {
    setShowGoalSetting(true);
  };

  const handleCreateSchedule = () => {
    setShowScheduling(true);
  };

  if (showAssessment) {
    return <AssessmentSelection onClose={() => setShowAssessment(false)} />;
  }

  if (showResourceLibrary) {
    return <LearningResourceLibrary onClose={() => setShowResourceLibrary(false)} />;
  }

  if (showProgressTracker) {
    return <ProgressTracker onClose={() => setShowProgressTracker(false)} />;
  }

  return (
    <>
      {/* Hero Section for Students */}
      <section className="py-20 md:py-32 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto text-center">
            <Badge className="mb-8 bg-blue-50 text-blue-700 border-blue-200 px-4 py-2 text-sm">
              <BookOpen className="w-4 h-4 mr-2" />
              Student Learning Platform
            </Badge>
            
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 text-gray-900 leading-tight">
              Accelerate Your Learning with{" "}
              <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                Mevolution
              </span>
            </h1>
            
            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-4xl mx-auto leading-relaxed">
              Discover personalized study paths, track your progress, and connect with fellow learners in our AI-powered educational environment.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-6 justify-center mb-16">
              <Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 text-lg h-14 rounded-lg">
                <Link to="/discover">
                  Start Learning
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Link>
              </Button>
              <Button 
                variant="outline" 
                size="lg" 
                className="border-2 border-gray-300 hover:bg-gray-50 px-8 py-4 text-lg h-14 rounded-lg text-gray-700"
                onClick={handleTakeAssessment}
              >
                <Play className="w-5 h-5 mr-2" />
                Take Assessment
              </Button>
            </div>

            {/* Student Stats */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
              <div className="text-center">
                <div className="text-3xl font-bold text-gray-900 mb-2">500+</div>
                <div className="text-gray-600">Learning Resources</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-gray-900 mb-2">24/7</div>
                <div className="text-gray-600">AI Support</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-gray-900 mb-2">95%</div>
                <div className="text-gray-600">Completion Rate</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Your Learning Journey Starts Here */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
              Your Learning Journey Starts Here
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Follow our structured path to academic success with personalized guidance and support.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
            <Card className="p-6 hover:shadow-lg transition-all duration-300 border border-gray-200 bg-white text-center">
              <CardContent className="p-0">
                <div className="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <Target className="w-8 h-8 text-blue-600" />
                </div>
                <h3 className="text-lg font-semibold mb-3 text-gray-900">Set Learning Goals</h3>
                <p className="text-gray-600 text-sm leading-relaxed mb-4">
                  Define your academic objectives and create achievable milestones for your learning journey.
                </p>
                <Button size="sm" className="w-full" onClick={handleSetGoals}>
                  Start Goal Setting
                </Button>
              </CardContent>
            </Card>

            <Card className="p-6 hover:shadow-lg transition-all duration-300 border border-gray-200 bg-white text-center">
              <CardContent className="p-0">
                <div className="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <BookMarked className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-lg font-semibold mb-3 text-gray-900">Learning Resource Library</h3>
                <p className="text-gray-600 text-sm leading-relaxed mb-4">
                  Access comprehensive educational materials across all subjects including readings, videos, and exercises.
                </p>
                <Button size="sm" className="w-full" onClick={handleOpenResourceLibrary}>
                  Browse Resources
                </Button>
              </CardContent>
            </Card>

            <Card className="p-6 hover:shadow-lg transition-all duration-300 border border-gray-200 bg-white text-center">
              <CardContent className="p-0">
                <div className="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <Calendar className="w-8 h-8 text-purple-600" />
                </div>
                <h3 className="text-lg font-semibold mb-3 text-gray-900">Study Schedule</h3>
                <p className="text-gray-600 text-sm leading-relaxed mb-4">
                  Create personalized study schedules that adapt to your learning pace and availability.
                </p>
                <Button size="sm" className="w-full" onClick={handleCreateSchedule}>
                  Plan Schedule
                </Button>
              </CardContent>
            </Card>

            <Card className="p-6 hover:shadow-lg transition-all duration-300 border border-gray-200 bg-white text-center">
              <CardContent className="p-0">
                <div className="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <Trophy className="w-8 h-8 text-yellow-600" />
                </div>
                <h3 className="text-lg font-semibold mb-3 text-gray-900">Track Progress</h3>
                <p className="text-gray-600 text-sm leading-relaxed mb-4">
                  Monitor your academic achievements and manually track your course progress with detailed control.
                </p>
                <Button size="sm" className="w-full" onClick={handleOpenProgressTracker}>
                  View Progress
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Modals */}
      {showGoalSetting && (
        <GoalSettingModal onClose={() => setShowGoalSetting(false)} />
      )}
      
      {showScheduling && (
        <StudyScheduleModal onClose={() => setShowScheduling(false)} />
      )}
    </>
  );
};
